<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-01-20 08:57:53
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-09-04 08:23:41
 * @FilePath: /things-admin/src/view/signlog/Sensitive.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="mian_content">
    <div class="tool_bar">
      <Button
        type="primary"
        icon="md-add"
        style="margin: 0 10px 0 0"
        size="default"
        @click="AddPointMsg"
        v-if="Validation.check(Resources.SENSITIVE_ADD)"
        >新增敏感词
      </Button>
      <Input
        class="searchId"
        v-model.trim="searchId"
        type="text"
        placeholder="请输入敏感词"
        maxlength="16"
      />
      <Button
        type="primary"
        icon="ios-search"
        style="margin: 0 10px"
        size="default"
        @click="searchdata"
        >查询
      </Button>
      <Button
        icon="md-refresh"
        style="margin-right: 10px"
        size="default"
        @click="resetData"
        >重置</Button
      >
    </div>
    <div class="table">
      <Table border :columns="columns" :data="data" max-height="520">
        <template #action="{ row, index }">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="editdata(row)"
             v-if="Validation.check(Resources.SENSITIVE_UPDATE)"
            >编辑</Button
          >
          <Button type="error" size="small" @click="deleteId(row.id)"  v-if="Validation.check(Resources.SENSITIVE_DELETE)"
            >删除</Button
          >
        </template>
      </Table>
      <div style="display: flex;justify-content: space-between;margin-top: 20px;">
      <div></div>
      <Page :total="total"   @on-change="changeSizeValue" @on-page-size-change="changePageSize" show-sizer/>
    </div>
    </div>
    <Modal v-model="modal" title="新增敏感词" @on-ok="ok" @on-cancel="cancel">
      <Tabs v-model="name" @on-click="changedata">
        <TabPane label="单条新增" name="name1">
          <Input
            style="margin: 40px 0"
            type="text"
            placeholder="单条敏感词添加"
            v-model.trim="singledata"
          ></Input>
        </TabPane>
        <TabPane label="批量新增" name="name2">
          <Input
            style="margin: 10px 0"
            :rows="6"
            type="textarea"
            placeholder="每个敏感词以英文逗号隔开"
            v-model.trim="batch"
          ></Input>
        </TabPane>
        <TabPane label="全部删除批量新增" name="name3">
          <Input
            style="margin: 10px 0"
            :rows="6"
            type="textarea"
            placeholder="将数据全部删再除批量新增，每个敏感词以英文逗号隔开"
            v-model.trim="deletebatch"
          ></Input>
        </TabPane>
      </Tabs>
    </Modal>
    <Modal v-model="modal1" title="提示" @on-ok="ok1" @on-cancel="cancel1">
      <p>确定要删除该条数据吗</p>
    </Modal>
    <Modal v-model="modal12" title="修改" :loading="loading">
      <Form ref="formValidate" :model="formValidate" :label-width="80">
        <FormItem label="id">
          <Input disabled v-model="formValidate.id"></Input>
        </FormItem>
        <FormItem label="敏感词">
          <Input v-model="formValidate.word"></Input>
        </FormItem>
        <FormItem label="创建时间">
          <DatePicker
            type="date"
            v-model="formValidate.created"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="创建时间"
            style="width: 200px"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="cancel2">取消</Button>
        <Button type="primary" @click="ok2">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  sensitiveWords,
  addsensitiveWords,
  batchAdd,
  deletebatchAdd,
  deletedata,
  putsensitiveWords,
} from "@/base/api/SensitiveApi";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
export default {
  data() {
    return {
      pageIndex: 1,
      Validation:Validation,
      Resources:Resources,
      loading: false,
      pageSize: 10,
      modal: false,
      total:'',
      columns: [
        {
          title: "id",
          key: "id",
        },

        {
          title: "敏感词",
          key: "word",
        },
        {
          title: "创建时间",
          key: "created",
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center",
        },
      ],
      data: [],
      name: "name1",
      singledata: "",
      batch: "",
      deletebatch: "",
      searchId: "",
      modal1: false,

      modal12: false,
      formValidate: {
        id: "",
        created: "",
        word: "",
      },
    };
  },
  methods: {
    getSensitive() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        word: this.searchId || "",
      };
      sensitiveWords(params).then((res) => {
        this.data = res.data.items;
        this.total = res.data.itemCount;
      });
    },
    changeSizeValue(data) {
        this.pageIndex = data;
        this.getSensitive()
    },
    changePageSize(data) {
      this.pageIndex = 1;
      this.pageSize = data;
      this.getSensitive()
    },
    AddPointMsg() {
      this.batch = "";
      this.deletebatch = "";
      this.singledata = "";
      this.modal = true;
    },
    formatDate(date) {
      var regex = /[\u4e00-\u9fa5]/;
      if (regex.test(date)) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } else {
        return date;
      }
    },
    deleteId(id) {
      this.formValidate.id = id;
      this.modal1 = true;
    },
    searchdata() {
      this.getSensitive();
    },

    // 编辑
    editdata(data) {
      this.formValidate.word = data.word;
      this.formValidate.created = data.created;
      this.formValidate.id = data.id;
      this.modal12 = true;
    },
    // 新增敏感词 确定
    ok() {
      // 新增接口
      if (this.name == "name1") {
        let params1 = {
          word: this.singledata,
        };
        addsensitiveWords(params1).then((res) => {
          this.$message.success("添加成功");
          this.modal = false;
          this.getSensitive();
        });
      } else if (this.name == "name2") {
        let params2 = {
          words: this.batch,
        };
        batchAdd(params2).then((res) => {
          this.$message.success("添加成功");
          this.modal = false;
          this.getSensitive();
        });
      } else {
        let params3 = {
          words: this.deletebatch,
        };
        deletebatchAdd(params3).then((res) => {
          this.$message.success("添加成功");
          this.modal = false;
          this.getSensitive();
        });
      }
    },
    // 删除确定
    ok1() {
      deletedata(this.formValidate.id).then((res) => {
        this.$message.success("删除成功");
        this.modal1 = false;
        this.getSensitive();
      });
    },
    // 删除取消
    cancel1() {
      this.modal1 = false;
    },
    // 修改 确定
    ok2() {
      this.loading = true;
      if (
        this.formValidate.word &&
        this.formValidate.created &&
        this.formValidate.id
      ) {
        this.formValidate.created = this.formatDate(this.formValidate.created);
        putsensitiveWords(this.formValidate)
          .then((res) => {
            this.$message.success("修改成功");
            this.getSensitive();
          })
          .finally(() => {
            this.loading = false;
            this.modal12 = false;
          });
      } else {
        this.$message.error("填写内容不能为空");
        this.loading = false;
      }
    },
    // 修改 取消
    cancel2() {
      this.modal12 = false;
    },
    // 重置
    resetData() {
      this.searchId = "";
      this.getSensitive();
    },
    // 新增敏感词 取消
    cancel() {
      this.modal = false;
    },
    // tab组件切换数据变化
    changedata(name) {
      if (name == "name1") {
        this.batch = "";
        this.deletebatch = "";
      } else if (name == "name2") {
        this.singledata = "";
        this.deletebatch = "";
      } else {
        this.singledata = "";
        this.batch = "";
      }
    },
  },
  mounted() {
    this.getSensitive();
  },
};
</script>

<style lang="less" scoped>
.mian_content {
  height: 600px;
  margin-top: 20px;
  .tool_bar {
    width: 626px;
    height: 66px;
    margin-bottom: 20px;
    padding: 10px 15px 10px 15px;
    background-color: #fafafa;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: #e5e5e5;
    line-height: 44px;
    .searchId {
      width: 160px;
      height: 32px;
    }
  }
}
</style>
